<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!-- 上传插件 -->
<link rel="stylesheet"
	href="/ajax/plugins/bootstrap-fileinput/css/fileinput.css"
	th:href="@{/ajax/plugins/bootstrap-fileinput/css/fileinput.css}" />
<link href="/css/font-awesome.css" th:href="@{/css/font-awesome.css}"
	rel="stylesheet" />
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-blogcolumn-add">
			<div class="form-group">
				<label class="col-sm-3 control-label" id="show1"><em
					class="gg-star" style="color: red; font-style: normal;">*&nbsp;</em>专栏名称：</label>
				<div class="col-sm-8">
					<input id="blogColumnName" name="blogColumnName"
						class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><em class="gg-star"
					style="color: red; font-style: normal;">*&nbsp;</em>请求地址：</label>
				<div class="col-sm-8">
					<input id="url" name="url" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">显示顺序：</label>
				<div class="col-sm-8">
					<div class="input-group spinner" data-trigger="spinner">
						<input type="text" class="form-control text-center" value="1"
							data-rule="quantity" id="orderNum" name="orderNum">
						<div class="input-group-addon">
							<a href="javascript:;" class="spin-up" data-spin="up"><i
								class="fa fa-caret-up"></i></a> <a href="javascript:;"
								class="spin-down" data-spin="down"><i
								class="fa fa-caret-down"></i></a>
						</div>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">专栏寄语：</label>
				<div class="col-sm-8">
					<input id="columnMessage" name="columnMessage" class="form-control"
						type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">专栏背景（1:6）：</label>
				<div class="col-sm-8">
					<input id="file-1" class="file" type="file" name="file">
				</div>
			</div>
			<div class="form-group" id="show2" align="center"
				style="display: none">
				<label class="col-sm-3 control-label"></label>
				<div class="col-sm-8">
					<img id="showImg2" width="510" height="100" src=""></img>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">专栏图标：</label>
				<div class="col-sm-8">
					<input id="icon" name="icon" class="form-control" type="text"
						placeholder="选择图标">
					<div class="ms-parent" style="width: 100%;">
						<div class="icon-drop animated flipInX"
							style="display: none; max-height: 200px; overflow-y: auto">
							<div data-th-include="blog/blogcolumn/icon"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">显示：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
						<input type="checkbox" th:checked="true"
							class="onoffswitch-checkbox" id="status" name="status"> <label
							class="onoffswitch-label" for="status"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<div class="form-control-static col-sm-offset-9">
					<button type="submit" class="btn btn-primary">提交</button>
					<button th:onclick="'javascript:layer_close()'"
						class="btn btn-danger" type="button">关闭</button>
				</div>
			</div>
		</form>
	</div>
	<div th:include="include::footer"></div>
	<script src="/ajax/plugins/bootstrap-fileinput/js/fileinput.min.js"
		th:src="@{/ajax/plugins/bootstrap-fileinput/js/fileinput.min.js}"></script>
	<script src="/ajax/plugins/bootstrap-fileinput/js/locales/zh.js"
		th:src="@{/ajax/plugins/bootstrap-fileinput/js/locales/zh.js  }"></script>
	<script src="/ajax/plugins/bootstrap-fileinput/js/locales/fr.js"
		th:src="@{/ajax/plugins/bootstrap-fileinput/js/locales/fr.js  }"></script>
	<script src="/rzspider/blog/blogcolumn/add.js"
		th:src="@{/rzspider/blog/blogcolumn/add.js}">
    </script>

	<script th:inline="javascript">
    var flag=[[${flag}]];
    var parentId2=[[${parentId}]];
    if(flag==0){
    	$('#show1').html('<em class="gg-star" style="color: red; font-style: normal;">*&nbsp;</em>主专栏名称：');
    }else if(flag==1){
    	$('#show1').html('<em class="gg-star" style="color: red; font-style: normal;">*&nbsp;</em>次专栏名称：');
    }
    </script>

	<script th:inline="javascript">
		var fileBase64_1;
		//上传绑定
		// 上传文件
		$("#file-1").fileinput({
			language : 'zh', // 设置语言
			uploadUrl : ctx + "blog/blogcontent/uploadBlogImg?blogFileName=blogcolumn&addWaterMark=false",
			allowedFileExtensions : [ 'jpg', 'png', 'jpeg',
										'gif' ],// 接收的文件后缀
			showUpload : true, // 是否显示上传按钮
			showRemove : false, // 是否显示移除按钮
			showCaption : false,// 是否显示标题
			browseClass : "btn btn-primary", // 按钮样式
			dropZoneEnabled : true,//是否显示拖拽区域
			uploadAsync : true,
			showBrowse : true,
			browseOnZoneClick : false,
			maxFileCount : 1, // 表示允许同时上传的最大文件个数
			enctype : 'multipart/form-data',
			maxFileSize : 1024
		// 单位为kb，如果为0表示不限制文件大小
		}).on("filebatchselected", function(event, files) {
			//返回文件名
		}).on('filesuccessremove', function(event, id){
			$("#show2").css('display', 'none');
			fileBase64_1=null;
		}).on("fileuploaded", function(event, data) {
			//返回文件名,改过，实际返回base64编码
			//更改，直接返回路径
			fileBase64_1 = (data.response.code == 0) ? (data.response.fileName) : null;
			$("#show2").css('display', 'block');
			document.getElementById("showImg2").src = fileBase64_1;
		});
	</script>
</body>
</html>
